<!DOCTYPE html>
<html>
    <head>
        <style>
            .calc {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-around;
                width: 250px;
            }
            .calc_output {
                width: 100%;
                display: flex;
                flex-flow: row wrap;
                justify-content: space-around;
                position: relative;
            }
            .calc_output-result {
                height: 40px;
                font-size: 30px;
                border: none 0;
                border-radius: 5px;
                background: #efefef;
                padding: 5px;
                text-align: end;
                width: 140px;
            }
            .calc_output-discount {
                height: 40px;
                font-size: 30px;
                border: none 0;
                border-radius: 5px;
                background: #efefef;
                padding: 5px;
                padding-left: 1px;
                padding-right: 35px;
                text-align: end;
                width: 60px;
            }
            .calc_output-percent {
                height: 40px;
                font-size: 30px;
                padding: 5px;
                position: absolute;
                right: 2px;
            }
            
            .calc_btn {
                display: inline-block;
                padding: 10px;
                margin: 5px;
                width: 30px;
                text-align: center;
                font-size: 18px;
                border-radius: 5px;
                box-shadow: #ddd 2px 1px;
                background: #eee;
                cursor: pointer;
            }

            .calc_btn.sign {
                background: #FFBB00
            }
            .calc_btn:hover {
                position: relative;
                left: 1px;
                top: 1px;
            }
        </style>
        <style>
            #out-of-petite-vue {
                padding: 10px;
                margin: 10px;
                border: solid #efefef;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="out-of-petite-vue1">
            <label>Discount: <input id="discount1" value=50 style="width:50px;"></label>
            <button type="button" onclick='applyDicount1()'>Apply</button>
            <br>
            <label>Sum: <i></i></label>
            <br>
            <label>Input: <span></span></label>
        </div>
        <div v-scope="Calc(null, window.store.calc1, window.effects1)"></div>

        <br>

        <div id="out-of-petite-vue2">
            <label>Discount: <input id="discount2" value=50 style="width:50px;"></label>
            <button type="button" onclick='applyDicount2()'>Apply</button>
            <br>
            <label>Sum: <i></i></label>
            <br>
            <label>Input: <span></span></label>
        </div>
        <div v-scope="Calc(null, window.store.calc2, window.effects2)"></div>


        <script src="./lib/require.js" defer
                data-main="./require.config.js"
                view-main="view/index"></script>
        <script>
            function applyDicount1() {
                window.store.calc1.discount = document.querySelector('#discount1').value
            }
            function applyDicount2() {
                window.store.calc2.discount = document.querySelector('#discount2').value
            }
        </script>
    </body>
</html>